<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="/js/test.js"></script>
    <script src="/js/jquery-3.3.1.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("div2").innerHTML = "div2";
        }
        $(function () {
            document.getElementById("div1").innerHTML = "div1";
        })
        $(document).ready(function () {
            document.getElementById("div3").innerHTML = "div3";
        })

        $(function () {
            //ID选择器
            $("#btn1").click(function () {
                $("#div1").width(200);
                $("#div1").height(200);
            })
            //元素选择器
            $("#btn2").click(function () {
                $("div").width(33)
                $("div").height(33)
            })

            //类选择器
            $("#btn3").click(function () {
                $(".divvv").width(330)
                $(".divvv").height(330)
            })

            //组合选择器
            $("#btn4").click(function () {
                //表示span上面的带有类名称为.divvv的标签
                $("span.divvv").css("background-color","yellow")
                //span标签下的div标签
                $("span div").css("background-color","blue")
                //span标签下带有id为div4的标签
                $("span #div4").css("background-color","green")
            })

            //属性选择器
            $("#btn5").click(function () {
                $("[href='#']").css("background-color","green")
            })
        })
    </script>
    <title>jquery知识回顾</title>
</head>
<body>
    <div id="div1" style="background-color: green;width: 66px;height: 66px">1</div>
    <div id="div2" class="divvv" style="background-color: red;width: 66px;height: 66px">2</div>
    <div id="div3" class="divvv" style="background-color: blue;width: 66px;height: 66px">3</div>
    <span class="divvv">发斯蒂芬
        <div id="div4" class="divtest" href="#">sdfa</div>
        <div id="div5" class="divtest">sdfa</div>
        <div id="div6">sdfa</div>
    </span>
    <button id="btn1">点击放大</button>
    <button id="btn2">点击缩小</button>
    <button id="btn3">点击放大</button>
    <button id="btn4">组合选择器</button>
    <button id="btn5">属性选择器</button>
    <br>
    <hr>
    <ul>
        <li>java</li>
        <li>shell</li>
        <li>c++</li>
        <li id="c">c#</li>
    </ul>
    用户名:<input type="text" id="username" name="username"><br>
    <span id="spantest">这是什么</span><br>
    <button id="btn11">结尾插入内容</button><br>
    <button id="btn12">开头插入内容</button><br>
    <button id="btn13">之后插入内容</button><br>
    <button id="btn14">之前插入内容</button><br>
    <button id="btn15">删除被选元素及其子元素</button><br>
    <button id="btn16">删除被选元素的子元素</button><br>
    <button id="btn17">获取html标签内容</button><br>
    <button id="btn18">设置html标签内容</button><br>
    <button id="btn19">获取html标签属性内容</button><br>
    <button id="btn20">设置html标签属性的内容</button><br>
</body>
<script>
    $(function () {
        //元素内部的最后追加内容
        $("#btn11").click(function () {
            $("ul").append("<li>javascript11</li>")
        })
    })

    $(function () {
        //元素内部的首行追加内容
        $("#btn12").click(function () {
            $("ul").prepend("<li>javascript11</li>")
        })
    })
    $(function () {
        //被选元素的外部的最后追加内容
        $("#btn13").click(function () {
            $("ul").after("<li>javascript11</li>")
        })
    })
    $(function () {
        //被选元素的外部的首行追加内容
        $("#btn14").click(function () {
            $("ul").before("<li>javascript11</li>")
        })
    })
    $(function () {
        //删除被选元素及其子元素
        $("#btn15").click(function () {
            $("li").last().remove()
        })
    })
    $(function () {
        //清空被选元素的子元素
        $("#btn16").click(function () {
            $("ul").empty()
        })
    })
    $(function () {
        //清空被选元素的子元素
        $("#btn17").click(function () {
            alert($("#username").val())
        })
    })
    $(function () {
        //清空被选元素的子元素
        $("#btn18").click(function () {
            $("#username").val("zbyy")
        })
    })
    $(function () {
        //清空被选元素的子元素
        $("#btn19").click(function () {
            alert($("#username").attr("name"))
            alert($("#spantest").html())
        })
    })
    $(function () {
        //清空被选元素的子元素
        $("#btn20").click(function () {
            $("#username").attr("name","password")
            $("#spantest").html("what is this?")
        })
    })

</script>
</html>
